<!--
 * @Descripttion: 过滤器V2
 * @version: 2.2
 * @Author: sakuya
 * @Date: 2021年7月30日14:48:41
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-09-15 10:59:30
-->

<template>
  <span
    v-for="item in dishtml"
    :data-id="item.data_id"
    :key="item.key"
    :style="{
      width: item.width + 'px',
      left: item.left,
      position: 'absolute',
      background: 'rgb(74, 190, 140)',
    }"
    class="spandata"
  >
    {{ item.code }} {{ item.material }} {{ item.quantity }}
    <br />
    {{ item.process_route.name }}
    |
    {{ item.process_name }}
    <br />
    {{ item.bom }}
  </span>
  <span :style="{ width: '1px', left: baseleft + 'px' }" class="spanlinered"></span>
  <span
    :style="{ width: '0px', 'margin-left': sumsbaseleft + 'px' }"
    class="spanline"
  ></span>
  <draggable
    class="list-group"
    group="task"
    v-model="html"
    item-key="id"
    ghost-class="ghost"
    @update="dragend"
    @add="dragend"
  >
    <template #item="{ element }">
      <span
        :style="{ width: element.width + 'px' }"
        :class="
          'spandata ' + (element.process_name == '复合1' ? 'backcolor1' : 'backcolor2')
        "
      >
        <el-tooltip placement="top" trigger="click">
          <template #content>
            {{ element.code }} {{ element.material }} {{ element.quantity }}
            <br />
            {{ element.process_route.name }}
            |
            {{ element.process_name }}
            <br />
            {{ element.bom }}
          </template>
          <span>
            {{ element.code }} {{ element.material }} {{ element.quantity }}
            <br />
            {{ element.process_route.name }}
            |
            {{ element.process_name }}
            <br />
            {{ element.bom }}
          </span>
        </el-tooltip>
      </span>
    </template>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";
export default {
  emits: ["success"],
  components: { draggable },
  name: "formatterScheduling",
  props: {
    params: Object,
    renderOpts: Object,
    success: Function,
  },
  data() {
    return {
      html: [],
      dishtml: [],
      baseleft: 0,
      sumsbaseleft: 0,
      dataparams: this.params,
    };
  },
  watch: {
    "params.row": {
      handler() {
        this.getinit();
      },
      deep: true,
    },
  },
  created() {
    document.body.ondragover = event => {
      event.preventDefault();
      return false;
    };
    document.body.ondrop = event => {
      event.preventDefault();
      return false;
    };
  },
  mounted() {
    this.getinit();
  },
  methods: {
    async dragend() {
      const { row } = this.params;
      await this.$API.pro.OpenCard.sort.post({
        machine_id: row.id,
        open_card_ids: this.html.map(v => v.id),
      });
    },
    async getinit() {
      this.html = this.dishtml = [];
      let today = this.renderOpts.attrs.getcolDate().value;
      let permin_width = 22 / 15;
      let now = new Date();
      let iMin = parseInt((now - today) / 1000 / 60);
      this.baseleft = iMin * permin_width + 60;
      const { column, row } = this.params;
      this.sumsbaseleft = this.baseleft;
      if ((row[column.field] ?? []).length > 0) {
        let col_data = row[column.field].map(open_card => {
          let dragg_able = true;
          if (open_card.audited_at) {
            dragg_able = false;
          }
          //15米/min
          /**
           * 注意，暂时没有复合结束数据，有复合结束数据，计算宽度为（开始时间-结束时间）*每分钟长度
           */
          let min = open_card.quantity / 15;
          min = min < 60 ? 60 : min;
          let width = min * permin_width;
          return {
            id: open_card.id,
            quantity: open_card.quantity,
            datetime: open_card.audited_at ?? open_card.created_at,
            width: width,
            code: open_card.customer.code,
            open_card: open_card.open_card_details?.code,
            material: open_card.open_card_details?.custno,
            process_name: open_card.process_name,
            process_route: open_card.process_route,
            bom:
              (open_card.glue?.name ?? "") +
              " | " +
              (open_card.material?.name ?? "") +
              " | " +
              (open_card.point_stick?.name ?? ""),
            value:
              open_card.material?.name +
              " | " +
              open_card.quantity +
              " | " +
              open_card.code,
            dragg_able: dragg_able,
          };
        });

        this.html = col_data.filter(v => v.dragg_able);

        let beging = null;
        this.dishtml = col_data
          .filter(v => v.dragg_able == false)
          .map(open_card => {
            let baseWidth = 0;
            if (beging == null) beging = new Date(open_card.datetime);
            let iMin = parseInt((beging - now) / 1000 / 60);
            baseWidth = iMin * permin_width + this.sumsbaseleft;
            this.sumsbaseleft = baseWidth + open_card.width;
            open_card["left"] = baseWidth + "px";
            return open_card;
          });
      }
      console.log(this.dishtml);
      this.sumsbaseleft =
        this.sumsbaseleft <= this.baseleft ? this.baseleft : this.sumsbaseleft;
    },
  },
};
</script>
<style>
.spanlinered {
  top: -1px;
  float: left;
  height: 60px;
  padding-left: 20px;
  overflow: hidden;
  font-size: 12px;
  color: rgb(255, 255, 255);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid rgb(255, 255, 255);
  background: rgb(216, 17, 17);
  padding-left: 2px;
  line-height: 60px;
  position: absolute;
}
.spanline {
  float: left;
  height: 50px;
}
.spandata {
  display: inline-block;
  height: 60px;
  padding-left: 20px;
  overflow: hidden;
  font-size: 12px;
  color: rgb(255, 255, 255);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 3px solid rgb(255, 255, 255);
  border-radius: 6px;

  color: rgb(0, 0, 0);
  padding-left: 5px;
  cursor: grab;
  line-height: 20px;
  overflow: hidden;
}
.backcolor2 {
  background: rgb(138, 156, 173);
}
.backcolor1 {
  background: rgb(207, 212, 217);
}
.ghost {
  opacity: 0.5;
  background: #ff6a6a;
}
</style>
